<template>
  <div>
    <Header title="出账快报"></Header>
    <div class="page__main">
      <div class="page__scroller" ref="main">
        <div class="account-main">
          <div class="title-bg" id="headTitle">
            {{timeList.showDate}}出账快报
            <button type="button" class="title-bg__btn" @click="openTipDialog('total')"></button>
          </div>
          <van-sticky :offset-top="46">
            <div class="top-menu">
              <span class="top-menu__menu" @click="menus.show = true">目录</span>
              <span class="top-menu__picker" v-show="timeList.pickerBtnShow" @click="timeList.show = true">往期回顾</span>
            </div>
          </van-sticky>
          <div class="box bg-white mgb-10">
            <div id="a" class="account-title">
              <i class="account-title__num"><span>1.1</span></i>
              全业务本月收入情况
              <button type="button" class="account-title__btn" @click="openTipDialog('a')"></button>
            </div>
            <div class="summary">
              {{timeList.monthData}}月全业务收入
              <span class="summary__num">{{numFormat(businessTotal.income)}}亿元</span>，
              环比{{businessTotal.increase < 0 ? '减少':'增加'}}
              <span :class="businessTotal.increase < 0 ? 'text--green': 'text--red'">
                {{businessTotal.increase == '-' ? '-' : numFormat(Math.abs(businessTotal.increase).toFixed(2))}}亿元
              </span>，
              环比{{businessTotal.increaseRange < 0 ? '减幅':'增幅'}}
              <span :class="businessTotal.increaseRange < 0 ? 'text--green': 'text--red'">
                {{businessTotal.increaseRange == '-' ? '-' : Math.abs(businessTotal.increaseRange).toFixed(2)}}%
              </span>，
              同比{{businessTotal.increase1 < 0 ? '减少':'增加'}}
              <span :class="businessTotal.increase1 < 0 ? 'text--green': 'text--red'">
                {{businessTotal.increase1 == '-' ? '-' : numFormat(Math.abs(businessTotal.increase1).toFixed(2))}}亿元
              </span>，
              同比{{businessTotal.increaseRange1 < 0 ? '减幅':'增幅'}}
              <span :class="businessTotal.increaseRange1 < 0 ? 'text--green': 'text--red'">
                {{businessTotal.increaseRange1 == '-' ? '-' : Math.abs(businessTotal.increaseRange1).toFixed(2)}}%
              </span>
            </div>
            <van-tabs class="init-tabs mgb-15" @change="handleTabClick">
              <van-tab name="businessTotalA" title="整体情况(月度)">
                <div class="chart-wrap">
                  <BarLineChartScroll :data="businessTotal.barData"></BarLineChartScroll>
                  <div class="chart-wrap__loading" v-show="businessTotal.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </van-tab>
              <van-tab name="businessTotalB" title="月度变化趋势">
                <div class="chart-wrap">
                  <LineChart :data="businessTotal.lineData"></LineChart>
                  <div class="chart-wrap__loading" v-show="businessTotal.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </van-tab>
            </van-tabs>
            <div class="account-title-sub">各业务占比（月度）</div>
            <div style="height: 200px; position: relative">
              <div class="pie-total">
                <div>{{timeList.monthData}}月总收入</div>
                <div class="pie-total__num">{{numFormat(businessTotal.pieData.total)}}</div>
              </div>
              <PieChart :data="businessTotal.pieData"></PieChart>
            </div>
            <div class="introduce">
              说明：收入值历史账期取结算收入，当前账期取出账收入，环比是按本月出账收入与上月结算收入值进行比较；能源业务收入不区分出账、结算
            </div>
          </div>
          <div class="box bg-white mgb-10" v-if="!isJanuary">
            <div id="h" class="account-title">
              <i class="account-title__num"><span>1.2</span></i>
              全业务1{{timeList.monthData==1?'':-timeList.monthData}}月收入情况
              <button type="button" class="account-title__btn" @click="openTipDialog('b')"></button>
            </div>
            <div class="summary">
              1{{timeList.monthData==1?'':-timeList.monthData}}月全业务本年累计收入
              <span class="summary__num">{{numFormat(previousData.income)}}亿元</span>，
              同比上年同期{{previousData.increase < 0 ? '减少':'增加'}}
              <span :class="previousData.increase < 0 ? 'text--green': 'text--red'">
                {{previousData.increase == '-' ? '-' : numFormat(Math.abs(previousData.increase).toFixed(2))}}亿元
              </span>，
              同比{{previousData.increaseRange < 0 ? '减幅':'增幅'}}
              <span :class="previousData.increaseRange < 0 ? 'text--green': 'text--red'">
                {{previousData.increaseRange == '-' ? '-' : Math.abs(previousData.increaseRange).toFixed(2)}}%
              </span>
            </div>
            <div class="chart-unit mgb-10">单位：亿元</div>
            <div class="table-wrap mgb-10">
              <table class="table">
                <tr>
                  <th>业务类型</th>
                  <th>上年</th>
                  <th>本年</th>
                  <th>增量</th>
                  <th>增幅</th>
                </tr>
                <tr v-for="(item, index) in previousData.tableData" :key="index">
                  <td>{{item.name}}</td>
                  <td>{{numFormat(item.value1)}}</td>
                  <td>{{numFormat(item.value2)}}</td>
                  <td>{{numFormat(item.value3)}}</td>
                  <td>{{item.value4}}%</td>
                </tr>
              </table>
            </div>
            <div class="introduce">
              说明：本年累计收入=本月出账收入+截止上月本年累计结算收入；
              上年同期累计收入=上年截至同月累计结算收入；
              同比用本年累计收入与上年同期累计收入相比；
              能源业务收入不区分出账、结算，年累计收入即本年各月累计收入
            </div>
          </div>
          <div class="box bg-white mgb-10">
            <div id="i" class="account-title">
              <i class="account-title__num"><span>{{isJanuary ? '1.2' : '1.3'}}</span></i>
              收入同比增量贡献率情况
              <button type="button" class="account-title__btn" @click="openTipDialog('c')"></button>
            </div>
            <div class="summary">
              {{isJanuary ? '1月各业务收入同比增量贡献率' : `1-${timeList.monthData}月各业务本年累计收入同比增量贡献率`}}如下：
              一体业务<span class="summary__num">{{settlementData.percentage1}}%</span>，
              跨行业业务<span class="summary__num">{{settlementData.percentage2}}%</span>，
              能源业务<span class="summary__num">{{settlementData.percentage3}}%</span>
            </div>
            <ul class="menu-list">
              <li
                class="menu-list__item"
                v-for="(item, index) in settlementData.menuList"
                :key="index"
                :class="settlementData.menuSelected == item.id ? 'menu-list__item--current' : ''"
                @click="handleTabOperater('settlement', item.id)"
              >{{item.name}}</li>
            </ul>
            <div class="chart-wrap" v-show="settlementData.menuSelected == '1'">
              <PieChart :data="settlementData.pieData"></PieChart>
              <div class="pie-legend">
                <div class="pie-legend__main">
                  <div class="pie-legend__item" v-for="(item, index) in settlementData.pieData.data" :key="index">
                    <i class="pie-legend__icon" :style="{background: item.color}"></i>
                    <div class="pie-legend__name">{{item.name}}</div>
                    <div class="pie-legend__value">{{item.value}}%</div>
                  </div>
                </div>
              </div>
              <div class="chart-wrap__loading" v-show="settlementData.loading">
                <van-loading size="24px" vertical>数据加载中...</van-loading>
              </div>
            </div>
            <div v-show="settlementData.menuSelected == '2'">
              <div class="chart-unit mgb-10">单位：%</div>
              <div class="chart-wrap">
                <BarLineChartScroll :data="settlementData.lineIndustry"></BarLineChartScroll>
                <div class="chart-wrap__loading" v-show="settlementData.loading">
                  <van-loading size="24px" vertical>数据加载中...</van-loading>
                </div>
              </div>
            </div>
            <div v-show="settlementData.menuSelected == '3'">
              <div class="chart-unit mgb-10">单位：%</div>
              <div class="chart-wrap">
                <BarLineChartScroll :data="settlementData.lineEnergy"></BarLineChartScroll>
                <div class="chart-wrap__loading" v-show="settlementData.loading">
                  <van-loading size="24px" vertical>数据加载中...</van-loading>
                </div>
              </div>
            </div>
            <div class="introduce">
              说明：本年累计收入=本月出账收入+截止上月本年累计结算收入；
              上年同期累计收入=上年截至同月累计结算收入；
              同比增量贡献率用本年累计收入与上年同期累计收入相比；
              能源业务收入不区分出账、结算，年累计收入即本年各月累计收入
            </div>
          </div>
          <div class="box bg-white mgb-10">
            <div id="j" class="account-title">
              <i class="account-title__num"><span>{{isJanuary ? '1.3' : '1.4'}}</span></i>
              收入同比拉动增长率情况
              <button type="button" class="account-title__btn" @click="openTipDialog('d')"></button>
            </div>
            <div class="summary">
              {{isJanuary ? '1月各业务收入同比拉动增长率' : `1-${timeList.monthData}月各业务本年累计收入同比拉动增长率`}}如下：
              一体业务<span class="summary__num">{{directorData.percentage1}}%</span>，
              跨行业业务<span class="summary__num">{{directorData.percentage2}}%</span>，
              能源业务<span class="summary__num">{{directorData.percentage3}}%</span>
            </div>
            <ul class="menu-list">
              <li
                class="menu-list__item"
                v-for="(item, index) in directorData.menuList"
                :key="index"
                :class="directorData.menuSelected == item.id ? 'menu-list__item--current' : ''"
                @click="handleTabOperater('director', item.id)"
              >{{item.name}}</li>
            </ul>
            <div class="chart-wrap" v-show="directorData.menuSelected == '1'">
              <PieChart :data="directorData.pieData"></PieChart>
              <div class="pie-legend">
                <div class="pie-legend__main">
                  <div class="pie-legend__item" v-for="(item, index) in directorData.pieData.data" :key="index">
                    <i class="pie-legend__icon" :style="{background: item.color}"></i>
                    <div class="pie-legend__name">{{item.name}}</div>
                    <div class="pie-legend__value">{{item.value}}%</div>
                  </div>
                </div>
              </div>
              <div class="chart-wrap__loading" v-show="directorData.loading">
                <van-loading size="24px" vertical>数据加载中...</van-loading>
              </div>
            </div>
            <div v-show="directorData.menuSelected == '2'">
              <div class="chart-unit mgb-10">单位：%</div>
              <div class="chart-wrap">
                <BarLineChartScroll :data="directorData.lineIndustry"></BarLineChartScroll>
                <div class="chart-wrap__loading" v-show="directorData.loading">
                  <van-loading size="24px" vertical>数据加载中...</van-loading>
                </div>
              </div>
            </div>
            <div v-show="directorData.menuSelected == '3'">
              <div class="chart-unit mgb-10">单位：%</div>
              <div class="chart-wrap">
                <BarLineChartScroll :data="directorData.lineEnergy"></BarLineChartScroll>
                <div class="chart-wrap__loading" v-show="directorData.loading">
                  <van-loading size="24px" vertical>数据加载中...</van-loading>
                </div>
              </div>
            </div>
            <div class="introduce">
              说明：本年累计收入=本月出账收入+截止上月本年累计结算收入；
              上年同期累计收入=上年截至同月累计结算收入；
              同比拉动增长贡献率用本年累计收入与上年同期累计收入相比；
              能源业务收入不区分出账、结算，年累计收入即本年各月累计收入
            </div>
          </div>
          <div class="box bg-white mgb-10">
            <div id="b" class="account-title">
              <i class="account-title__num"><span>2.1</span></i>
              一体业务本月收入情况
              <button type="button" class="account-title__btn" @click="openTipDialog('e')"></button>
            </div>
            <ul class="menu-list">
              <li
                class="menu-list__item"
                v-for="(item, index) in operaterData.menuList"
                :key="index"
                :class="operaterData.menuSelected == item.id ? 'menu-list__item--current' : ''"
                @click="handleTabOperater('operater', item.id)"
              >{{item.name}}</li>
            </ul>
            <div class="summary" v-show="operaterData.menuSelected == '1'">
              {{timeList.monthData}}月一体业务收入
              <span class="summary__num">{{numFormat(operaterData.income)}}亿元</span>，
              环比{{operaterData.increase < 0 ? '减少':'增加'}}
              <span :class="operaterData.increase < 0 ? 'text--green': 'text--red'">
                {{operaterData.increase == '-' ? '-' : numFormat(Math.abs(operaterData.increase).toFixed(2))}}亿元
              </span>，
              环比{{operaterData.increaseRange < 0 ? '减幅':'增幅'}}
              <span :class="operaterData.increaseRange < 0 ? 'text--green': 'text--red'">
                {{operaterData.increaseRange == '-' ? '-' : Math.abs(operaterData.increaseRange).toFixed(2)}}%
              </span>,
              同比{{operaterData.increase1 < 0 ? '减少':'增加'}}
              <span :class="operaterData.increase1 < 0 ? 'text--green': 'text--red'">
                {{operaterData.increase1 == '-' ? '-' : numFormat(Math.abs(operaterData.increase1).toFixed(2))}}亿元
              </span>，
              同比{{operaterData.increaseRange1 < 0 ? '减幅':'增幅'}}
              <span :class="operaterData.increaseRange1 < 0 ? 'text--green': 'text--red'">
                {{operaterData.increaseRange1 == '-' ? '-' : Math.abs(operaterData.increaseRange1).toFixed(2)}}%
              </span>
            </div>
            <div class="summary" v-show="operaterData.menuSelected == '2'">
              {{timeList.monthData}}月5G业务收入
              <span class="summary__num">{{numFormat(operaterData.income)}}亿元</span>，
              环比上月{{operaterData.increase < 0 ? '减少':'增加'}}
              <span :class="operaterData.increase < 0 ? 'text--green': 'text--red'">
                {{operaterData.increase == '-' ? '-' : numFormat(Math.abs(operaterData.increase).toFixed(2))}}亿元
              </span>，
              环比上月{{operaterData.increaseRange < 0 ? '减幅':'增幅'}}
              <span :class="operaterData.increaseRange < 0 ? 'text--green': 'text--red'">
                {{operaterData.increaseRange == '-' ? '-' : Math.abs(operaterData.increaseRange).toFixed(2)}}%
              </span>；
              在一体业务中占比<span class="summary__num">{{operaterData.percentage5G}}%</span>，
              环比上月{{operaterData.percentage5GChange < 0 ? '减少':'增加'}}
              <span :class="operaterData.percentage5GChange < 0 ? 'text--green': 'text--red'">
                {{operaterData.percentage5GChange == '-' ? '-' : Math.abs(operaterData.percentage5GChange).toFixed(2)}}PP
              </span>
            </div>
            <div>
              <van-tabs class="init-tabs mgb-15" @change="handleTabClick" v-model="operaterData.activeName">
                <van-tab name="operateA" title="整体情况(月度)">
                  <div class="chart-wrap" v-show="operaterData.menuSelected == '1'">
                    <BarLineChartScroll :data="operaterData.totalMonth"></BarLineChartScroll>
                    <div class="chart-wrap__loading" v-show="operaterData.loading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                  <div class="chart-wrap" v-show="operaterData.menuSelected == '2'">
                    <BarLineChartScroll :data="operaterData.totalMonthA"></BarLineChartScroll>
                    <div class="chart-wrap__loading" v-show="operaterData.loading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                </van-tab>
                <van-tab name="operateB" title="月度变化趋势">
                  <div class="chart-wrap" v-show="operaterData.menuSelected == '1'">
                    <LineChart :data="operaterData.lineData"></LineChart>
                    <div class="chart-wrap__loading" v-show="operaterData.loading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                  <div class="chart-wrap" v-show="operaterData.menuSelected == '2'">
                    <BarLineChartScroll :data="operaterData.lineDataA"></BarLineChartScroll>
                    <div class="chart-wrap__loading" v-show="operaterData.loading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                </van-tab>
              </van-tabs>
            </div>
            <div class="account-title-sub">各业务占比（月度）</div>
            <div style="position: relative; padding: 30px 0;">
              <div class="chart-unit" style="position: absolute; top: 0; right: 0px;">单位：{{operaterData.pieData.unit}}</div>
              <div style="height: 220px; position: relative">
                <div class="pie-total">
                  <div>{{timeList.monthData}}月总收入</div>
                  <div class="pie-total__num">{{numFormat(operaterData.pieData.total)}}</div>
                </div>
                <PieChart :data="operaterData.pieData"></PieChart>
              </div>
              <div class="pie-legend">
                <div class="pie-legend__main">
                  <div class="pie-legend__item" v-for="(item, index) in operaterData.pieData.data" :key="index">
                    <i class="pie-legend__icon" :style="{background: item.color}"></i>
                    <div class="pie-legend__name">{{item.name}}</div>
                    <div>
                      <span>{{index==4?item.value:numFormat(item.value)}}</span>&emsp;
                      <span>{{item.percentage}}%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="introduce">
              说明：收入值历史账期取结算收入，当前账期取出账收入，环比是按本月出账收入与上月结算收入值进行比较，同比是按本月出账收入与上年同月结算收入值进行比较；
            </div>
          </div>
          <div class="box bg-white mgb-10">
            <div id="c" class="account-title">
              <i class="account-title__num"><span>2.2</span></i>
              一体业务本月出账收入（剔除追溯）情况
              <button type="button" class="account-title__btn" @click="openTipDialog('f')"></button>
            </div>
            <div class="summary mgb-10">
              {{timeList.monthData}}月一体业务出账收入（剔除追溯）
              <span class="summary__num">{{numFormat(eliminateDate.income)}}亿元</span>，
              环比{{eliminateDate.increase < 0 ? '减少':'增加'}}
              <span :class="eliminateDate.increase < 0 ? 'text--green': 'text--red'">
                {{eliminateDate.increase == '-' ? '-' : numFormat(Math.abs(eliminateDate.increase).toFixed(2))}}亿元
              </span>，
              环比{{eliminateDate.increaseRange < 0 ? '减幅':'增幅'}}
              <span :class="eliminateDate.increaseRange < 0 ? 'text--green': 'text--red'">
                {{eliminateDate.increaseRange == '-' ? '-' : Math.abs(eliminateDate.increaseRange).toFixed(2)}}%
              </span>，
              同比{{eliminateDate.increase1 < 0 ? '减少':'增加'}}
              <span :class="eliminateDate.increase1 < 0 ? 'text--green': 'text--red'">
                {{eliminateDate.increase1 == '-' ? '-' : numFormat(Math.abs(eliminateDate.increase1).toFixed(2))}}亿元
              </span>，
              同比{{eliminateDate.increaseRange1 < 0 ? '减幅':'增幅'}}
              <span :class="eliminateDate.increaseRange1 < 0 ? 'text--green': 'text--red'">
                {{eliminateDate.increaseRange1 == '-' ? '-' : Math.abs(eliminateDate.increaseRange1).toFixed(2)}}%
              </span>
            </div>
            <van-tabs class="init-tabs mgb-10" @change="handleTabClick">
              <van-tab name="eliminateA" title="整体情况(月度)">
                <div class="chart-wrap">
                  <BarLineChartScroll :data="eliminateDate.barData"></BarLineChartScroll>
                  <div class="chart-wrap__loading" v-show="eliminateDate.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </van-tab>
              <van-tab name="eliminateB" title="月度变化趋势">
                <div class="chart-wrap">
                  <LineChart :data="eliminateDate.lineData"></LineChart>
                  <div class="chart-wrap__loading" v-show="eliminateDate.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </van-tab>
            </van-tabs>
          </div>
          <div class="box bg-white mgb-10" v-if="!isJanuary">
            <div id="k" class="account-title">
              <i class="account-title__num"><span>2.3</span></i>
              一体业务{{isJanuary ? '1': `1-${timeList.monthData}`}}月收入调整金额绝对值情况
              <button type="button" class="account-title__btn" @click="openTipDialog('g')"></button>
            </div>
            <div class="summary mgb-10">
              {{isJanuary ? '1': `1-${timeList.monthData}`}}月一体业务收入调整金额绝对值
              <span class="summary__num">{{numFormat(accountAbsDate.income)}}万元</span>，
              同比上年同期{{accountAbsDate.increase < 0 ? '减少':'增加'}}
              <span :class="accountAbsDate.increase < 0 ? 'text--green': 'text--red'">
                {{accountAbsDate.increase == '-' ? '-' : numFormat(Math.abs(accountAbsDate.increase).toFixed(2))}}万元
              </span>，
              同比{{accountAbsDate.increaseRange < 0 ? '减幅':'增幅'}}
              <span :class="accountAbsDate.increaseRange < 0 ? 'text--green': 'text--red'">
                {{accountAbsDate.increaseRange == '-' ? '-' : Math.abs(accountAbsDate.increaseRange).toFixed(2)}}%
              </span>
            </div>
            <van-tabs class="init-tabs mgb-10" @change="handleTabClick">
              <van-tab name="eaccountAbsA" title="整体情况(月度)">
                <div class="chart-wrap">
                  <BarLineChartScroll :data="accountAbsDate.barData"></BarLineChartScroll>
                  <div class="chart-wrap__loading" v-show="accountAbsDate.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </van-tab>
              <van-tab name="accountAbsB" title="月度变化趋势">
                <div class="chart-wrap">
                  <LineChart :data="accountAbsDate.lineData"></LineChart>
                  <div class="chart-wrap__loading" v-show="accountAbsDate.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </van-tab>
            </van-tabs>
            <div class="introduce">
              说明：一体业务本年累计收入调整金额绝对值=一体业务本年累计调账金额绝对值+一体业务本年累计追溯金额绝对值
            </div>
          </div>
          <div class="box bg-white mgb-10">
            <div id="d" class="account-title">
              <i class="account-title__num"><span>{{isJanuary ? '2.3' : '2.3.1'}}</span></i>
              一体业务本月追溯情况
              <button type="button" class="account-title__btn" @click="openTipDialog('h')"></button>
            </div>
            <div class="summary mgb-10">
              {{timeList.monthData}}月一体业务追溯
              <span class="summary__num">{{numFormat(businessData.total)}}万元</span>，
              其中追溯金额为正省分<span class="summary__num">{{businessData.increase}}个</span>，
              追溯金额为负省分<span class="summary__num">{{businessData.decrease}}个</span>，
              追溯金额为0省分<span class="summary__num">{{businessData.none}}个<slot v-if="businessData.noneList != ''">({{businessData.noneList}})</slot></span>
            </div>
            <van-tabs class="init-tabs mgb-10" @change="handleTabClick">
              <van-tab name="businessA" title="整体情况(月度)">
                <div class="chart-wrap">
                  <BarLineChart :data="businessData.totalMonth"></BarLineChart>
                  <div class="chart-wrap__loading" v-show="businessData.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </van-tab>
              <van-tab name="businessB" title="月度变化趋势">
                <div class="chart-wrap">
                  <LineChart :data="businessData.lineData"></LineChart>
                  <div class="chart-wrap__loading" v-show="businessData.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </van-tab>
            </van-tabs>
          </div>
          <div class="box bg-white mgb-10">
            <div id="e" class="account-title">
              <i class="account-title__num"><span>{{isJanuary ? '2.4' : '2.3.2'}}</span></i>
              一体业务本月调账情况
              <button type="button" class="account-title__btn" @click="openTipDialog('i')"></button>
            </div>
            <div class="summary mgb-10">
              {{timeList.monthBefore}}月一体业务调账
              <span class="summary__num">{{numFormat(reconciliationData.total)}}万元</span>，
              其中调账净额为正省分<span class="summary__num">{{reconciliationData.increase}}个</span>，
              调账净额为负省分<span class="summary__num">{{reconciliationData.decrease}}个</span>，
              调账净额为0省分<span class="summary__num">{{reconciliationData.none}}个<slot v-if="reconciliationData.noneList != ''">({{reconciliationData.noneList}})</slot></span>
            </div>
            <van-tabs class="init-tabs mgb-10" @change="handleTabClick">
              <van-tab name="reconciliationA" title="整体情况(月度)">
                <div class="chart-wrap">
                  <BarLineChart :data="reconciliationData.totalMonth"></BarLineChart>
                  <div class="chart-wrap__loading" v-show="reconciliationData.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </van-tab>
              <van-tab name="reconciliationB" title="月度变化趋势">
                <div class="chart-wrap">
                  <LineChart :data="reconciliationData.lineData"></LineChart>
                  <div class="chart-wrap__loading" v-show="reconciliationData.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </van-tab>
            </van-tabs>
          </div>
          <div class="box bg-white mgb-10">
            <div id="f" class="account-title">
              <i class="account-title__num"><span>3.1</span></i>
              跨行业业务本月收入情况
              <button type="button" class="account-title__btn" @click="openTipDialog('j')"></button>
            </div>
            <div class="summary mgb-10">
              {{timeList.monthData}}月跨行业业务收入
              <span class="summary__num">{{numFormat(incomeData.income)}}亿元</span>，
              环比{{incomeData.increase < 0 ? '减少':'增加'}}
              <span :class="incomeData.increase < 0 ? 'text--green': 'text--red'">
                {{incomeData.increase == '-' ? '-' : numFormat(Math.abs(incomeData.increase).toFixed(2))}}亿元
              </span>，
              环比{{incomeData.increaseRange < 0 ? '减幅':'增幅'}}
              <span :class="incomeData.increaseRange < 0 ? 'text--green': 'text--red'">
                {{incomeData.increaseRange == '-' ? '-' : Math.abs(incomeData.increaseRange).toFixed(2)}}%
              </span>,
              同比{{incomeData.increase1 < 0 ? '减少':'增加'}}
              <span :class="incomeData.increase1 < 0 ? 'text--green': 'text--red'">
                {{incomeData.increase1 == '-' ? '-' : numFormat(Math.abs(incomeData.increase1).toFixed(2))}}亿元
              </span>，
              同比{{incomeData.increaseRange1 < 0 ? '减幅':'增幅'}}
              <span :class="incomeData.increaseRange1 < 0 ? 'text--green': 'text--red'">
                {{incomeData.increaseRange1 == '-' ? '-' : Math.abs(incomeData.increaseRange1).toFixed(2)}}%
              </span>
            </div>
            <van-tabs class="init-tabs mgb-10" @change="handleTabClick">
              <van-tab name="incomeA" title="整体情况(月度)">
                <div class="chart-wrap">
                  <BarLineChartScroll :data="incomeData.totalMonth"></BarLineChartScroll>
                  <div class="chart-wrap__loading" v-show="incomeData.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </van-tab>
              <van-tab name="incomeB" title="月度变化趋势">
                <div class="chart-wrap">
                  <LineChart :data="incomeData.lineData"></LineChart>
                  <div class="chart-wrap__loading" v-show="incomeData.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </van-tab>
              <van-tab name="incomeC" title="季度均值">
                <div class="chart-unit">单位：万元</div>
                <div class="chart-wrap" style="height: 182px">
                  <BarLineChartScroll :data="incomeData.totalYear"></BarLineChartScroll>
                  <div class="chart-wrap__loading" v-show="incomeData.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                  <div class="income-legend">
                    <div class="income-legend__item" v-for="(item, index) in incomeData.totalYear.data" :key="index">
                      <i v-if="index == '3'" class="income-legend__icon" :style="{background: item.color}"></i>
                      <i v-else class="income-legend__icon" :style="{background: item.color[0]}"></i>
                      {{item.name}}
                    </div>
                  </div>
                </div>
              </van-tab>
            </van-tabs>
            <div class="introduce">
              说明：收入值历史账期取结算收入，当前账期取出账收入，环比是按本月出账收入与上月结算收入值进行比较
            </div>
          </div>
          <div class="box bg-white mgb-10">
            <div id="g" class="account-title">
              <i class="account-title__num"><span>4.1</span></i>
              能源业务本月收入情况
              <button type="button" class="account-title__btn" @click="openTipDialog('k')"></button>
            </div>
            <div class="summary">
              {{timeList.monthData}}月能源业务收入
              <span class="summary__num">{{numFormat(energyData.income)}}亿元</span>，
              环比{{energyData.increase < 0 ? '减少':'增加'}}
              <span :class="energyData.increase < 0 ? 'text--green': 'text--red'">
                {{energyData.increase == '-' ? '-' : numFormat(Math.abs(energyData.increase).toFixed(2))}}亿元
              </span>，
              环比{{energyData.increaseRange < 0 ? '减幅':'增幅'}}
              <span :class="energyData.increaseRange < 0 ? 'text--green': 'text--red'">
                {{energyData.increaseRange == '-' ? '-' : Math.abs(energyData.increaseRange).toFixed(2)}}%
              </span>
              <template v-if="parseFloat(timeList.showDate.substr(0, 4)) > 2020">
                ,同比{{energyData.increase1 < 0 ? '减少':'增加'}}
                <span :class="energyData.increase1 < 0 ? 'text--green': 'text--red'">
                  {{energyData.increase1 == '-' ? '-' : numFormat(Math.abs(energyData.increase1).toFixed(2))}}亿元
                </span>，
                同比{{energyData.increaseRange1 < 0 ? '减幅':'增幅'}}
                <span :class="energyData.increaseRange1 < 0 ? 'text--green': 'text--red'">
                  {{energyData.increaseRange1 == '-' ? '-' : Math.abs(energyData.increaseRange1).toFixed(2)}}%
                </span>
              </template>
            </div>
            <van-tabs class="init-tabs mgb-10" @change="handleTabClick">
              <van-tab name="energyA" title="整体情况(月度)">
                <div class="chart-wrap">
                  <BarLineChartScroll :data="energyData.totalMonth"></BarLineChartScroll>
                  <div class="chart-wrap__loading" v-show="energyData.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </van-tab>
              <van-tab name="energyB" title="月度变化趋势">
                <div class="chart-wrap">
                  <LineChart :data="energyData.lineData"></LineChart>
                  <div class="chart-wrap__loading" v-show="energyData.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </van-tab>
            </van-tabs>
            <div class="account-title-sub">各业务占比（月度）</div>
            <div style="position: relative; padding: 30px 0;">
              <div class="chart-unit" style="position: absolute; top: 0; right: 0px;">单位：{{energyData.pieData.unit}}</div>
              <div style="height: 220px; position: relative">
                <div class="pie-total">
                  <div>{{timeList.monthData}}月总收入</div>
                  <div class="pie-total__num">{{numFormat(energyData.pieData.total)}}</div>
                </div>
                <PieChart :data="energyData.pieData"></PieChart>
              </div>
              <div class="pie-legend">
                <div class="pie-legend__main">
                  <div class="pie-legend__item" v-for="(item, index) in energyData.pieData.data" :key="index">
                    <i class="pie-legend__icon" :style="{background: item.color}"></i>
                    <div class="pie-legend__name">{{item.name}}</div>
                    <div>
                      <span>{{numFormat(item.value)}}</span>&emsp;
                      <span>{{item.percentage}}%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="footer-tip">了解更多信息，请登录PC端运营数据展示系统</div>
          <div class="go-top" v-show="goTopBtn.show" @click="goTop"></div>
          <WaterMark :length="28"></WaterMark>
        </div>
      </div>
    </div>
    <van-popup
      v-model="menus.show"
      position="left"
      :style="{height: '100%', width: '300px' }"
    >
      <div class="page-menus">
        <div class="page-menus__title">目录</div>
        <div>
          <div class="page-menus__next">1.全业务</div>
          <div id="page"
               class="page-menus__item"
               v-for="(item, index) in menus.list1"
               :key="index"
               @click="anchorJump(item.key)">
            <i>1.{{index + 1 }}&ensp;</i>{{item.name}}
          </div>
        </div>
        <div>
          <div class="page-menus__next">2.一体业务</div>
          <div
            class="page-menus__item"
            v-for="(item, index) in menus.list2"
            :key="index"
            @click="anchorJump(item.key)"
          >
            <i>
              <template v-if="isJanuary">2.{{index + 1 }}</template>
              <template v-else>
                <template v-if="item.key == 'd'">&emsp;2.3.1</template>
                <template v-else-if="item.key == 'e'">&emsp;2.3.2</template>
                <template v-else>2.{{index + 1 }}</template>
              </template>
            </i>{{item.name}}
          </div>
        </div>
        <div>
          <div class="page-menus__next">3.跨行业业务</div>
          <div
            class="page-menus__item"
            v-for="(item, index) in menus.list3"
            :key="index"
            @click="anchorJump(item.key)">
            <i>3.{{index + 1 }}&ensp;</i>{{item.name}}
          </div>
        </div>
        <div>
          <div class="page-menus__next">4.能源业务</div>
          <div
            class="page-menus__item"
            v-for="(item, index) in menus.list4"
            :key="index"
            @click="anchorJump(item.key)">
            <i>4.{{index + 1 }}&ensp;</i>{{item.name}}
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup
      v-model="timeList.show"
      position="bottom"
      :style="{height: '40%'}"
    >
      <van-picker
        show-toolbar
        :columns="timeList.list"
        :defaultIndex="timeList.defaultIndex"
        @cancel="cancelFn"
        @confirm="confirmFn"
      />
    </van-popup>
    <tipDialog :show="tipDialog.show" :type="tipDialog.type" @tipDialogClose="tipDialogClose"></tipDialog>
  </div>
</template>

<script>
import Header from '@/components/Header'
import LineChart from '@/components/LineChart'
import PieChart from '@/components/PieChart'
import BarLineChart from './BarLineChart'
import WaterMark from "@/components/WaterMark"
import BarLineChartScroll from './BarLineChartScroll'
import tipDialog from './tipDialog'

import data from './default-data.js'

export default {
  components:{
    Header,
    PieChart,
    BarLineChart,
    LineChart,
    WaterMark,
    BarLineChartScroll,
    tipDialog
  },
  data,
  methods: {
    //选快报日期
    cancelFn() {
      this.timeList.show = false
    },
    confirmFn(item) {
      if (this.timeList.selectDate != item.id) {
        this.timeList.selectDate = item.id
        this.timeList.showDate = this.dateFormatter(item.id)
        let paramStr = this.timeList.selectDate + ''
        let dateArr = paramStr.replace(/(.{4})/g,'$1,').split(',')
        let month = dateArr[1][0] == '0' ? dateArr[1][1] : dateArr[1]
        if (month == '1') {
          this.timeList.yearBefore = parseFloat(dateArr[0]) - 1
          this.timeList.monthBefore = '12'
          this.isJanuary = true
          this.menus.list1 = this.initList.list1.filter(item => {
            return item.key != 'h'
          })
          this.menus.list2 = this.initList.list2.filter(item => {
            return item.key != 'k'
          })
        } else {
          this.timeList.yearBefore = dateArr[0]
          this.timeList.monthBefore = (parseFloat(month) - 1) < 10 ?(parseFloat(month) - 1) : (parseFloat(month) - 1)
          this.initList.list1[1].name='全业务'+'1-'+month+'月收入情况'
          this.initList.list2[2].name='一体业务1-'+month+'月收入调整金额绝对值情况'
          this.isJanuary = false
          this.menus.list1 = JSON.parse(JSON.stringify(this.initList.list1))
          this.menus.list2 = JSON.parse(JSON.stringify(this.initList.list2))
        }
        this.timeList.monthData=month
        this.pageInit()
      }
      this.timeList.show = false
    },
    //目录锚点定位
    anchorJump(anchor) {
      let anchorEle = document.querySelector('#' + anchor)
      if (!!anchorEle) {
        anchorEle.scrollIntoView(true)
        let scrollTop = this.$refs.main.scrollTop
        this.$refs.main.scrollTop = scrollTop - 36
      }
      // this.menus.list1[1].name=this.menus.list1[1].name
      this.menus.show = false
    },
    //返回顶部
    goTop() {
      let headTitle = document.querySelector('#headTitle')
      headTitle.scrollIntoView(true)
    },
    //滚动显示返回顶部按钮
    handleScroll() {
      let scrollTop = this.$refs.main.scrollTop

      if (scrollTop > 200) {
        this.goTopBtn.show = true
      } else {
        this.goTopBtn.show = false
      }
    },
    //获得快报日期
    getDate() {
      return new Promise((resolve, reject) => {
        this.$http.post('api/accounts/dateMonth', {}).then(data => {
          let monthList = data.dateMonth
          let currentDate = monthList[0].STAT_MONTH
          if(monthList.length > 1) {
            this.timeList.pickerBtnShow = true
          } else {
            this.timeList.pickerBtnShow = false
          }
          this.timeList.selectDate = currentDate
          this.timeList.showDate = this.dateFormatter(this.timeList.selectDate)

          let paramStr = this.timeList.selectDate + ''
          let dateArr = paramStr.replace(/(.{4})/g,'$1,').split(',')
          let month = dateArr[1]
         if(month.substr(0,1)=="0"){
            month=month.substr(1,1);
         }
          this.timeList.monthData=month
          this.initList = JSON.parse(JSON.stringify(this.menus))
          if (month == '1') {
            this.timeList.yearBefore = parseFloat(dateArr[0]) - 1
            this.timeList.monthBefore = '12'
            this.isJanuary = true
            this.menus.list1 = this.initList.list1.filter(item => {
              return item.key != 'h'
            })
            this.menus.list2 = this.initList.list2.filter(item => {
              return item.key != 'k'
            })
          } else {
            this.timeList.yearBefore = dateArr[0]
            this.timeList.monthBefore = (parseFloat(month) - 1) < 10 ? (parseFloat(month) - 1) : (parseFloat(month) - 1)
            this.initList.list1[1].name='全业务1-'+month+'月收入情况'
            this.initList.list2[2].name='一体业务1-'+month+'月收入调整金额绝对值情况'
            this.isJanuary = false
            this.menus.list1 = JSON.parse(JSON.stringify(this.initList.list1))
            this.menus.list2 = JSON.parse(JSON.stringify(this.initList.list2))
          }
          monthList.forEach(item => {
            this.timeList.list.push({
              text: this.dateFormatter(item.STAT_MONTH) + '出账快报',
              id: item.STAT_MONTH
            })
          })
          resolve('ok')
        })
      })
    },
    //格式化日期
    dateFormatter(param) {
      let paramStr = param + ''
      let dateArr = paramStr.replace(/(.{4})/g,'$1,').split(',')
      let month = dateArr[1][0] == '0' ? dateArr[1][1] : dateArr[1]
      return (dateArr[0] + '年' + month + '月')
    },
    handleTabOperater(type, id) {
      if (type == 'operater') {
        if (this.operaterData.menuSelected != id) {
          this.operaterData.menuSelected = id
          this.operaterData.activeName = 'operateA'
          this.getOperater()
        }
      } else if (type == 'settlement') {
        if (this.settlementData.menuSelected != id) {
          this.settlementData.menuSelected = id
          if (this.settlementData.menuSelected == '1') {
            let data = JSON.parse(JSON.stringify(this.settlementData.pieData.data))
            this.settlementData.pieData.data = []
            this.settlementData.pieData.data = JSON.parse(JSON.stringify(data))
          } else if (this.settlementData.menuSelected == '2') {
            let data = JSON.parse(JSON.stringify(this.settlementData.lineIndustry.dataX))
            this.settlementData.lineIndustry.dataX = []
            this.settlementData.lineIndustry.dataX = JSON.parse(JSON.stringify(data))
          } else if (this.settlementData.menuSelected == '3') {
            let data = JSON.parse(JSON.stringify(this.settlementData.lineEnergy.dataX))
            this.settlementData.lineEnergy.dataX = []
            this.settlementData.lineEnergy.dataX = JSON.parse(JSON.stringify(data))
          }
        }
      } else if (type == 'director') {
        if (this.directorData.menuSelected != id) {
          this.directorData.menuSelected = id
          if (this.directorData.menuSelected == '1') {
            let data = JSON.parse(JSON.stringify(this.directorData.pieData.data))
            this.directorData.pieData.data = []
            this.directorData.pieData.data = JSON.parse(JSON.stringify(data))
          } else if (this.directorData.menuSelected == '2') {
            let data = JSON.parse(JSON.stringify(this.directorData.lineIndustry.dataX))
            this.directorData.lineIndustry.dataX = []
            this.directorData.lineIndustry.dataX = JSON.parse(JSON.stringify(data))
          } else if (this.directorData.menuSelected == '3') {
            let data = JSON.parse(JSON.stringify(this.directorData.lineEnergy.dataX))
            this.directorData.lineEnergy.dataX = []
            this.directorData.lineEnergy.dataX = JSON.parse(JSON.stringify(data))
          }
        }
      }
    },
    //获得全业务收入情况
    getRevenue() {
      let params = {
        areaId: this.userInfo.home_city,
        statMonth: this.timeList.selectDate,
      }
      this.businessTotal.loading = true
      this.businessTotal.income = ''
      this.businessTotal.increase = ''
      this.businessTotal.increaseRange = ''
      this.businessTotal.increase1 = ''
      this.businessTotal.increaseRange1 = ''
      this.businessTotal.barData.dataX = []
      this.businessTotal.barData.data[0].values = []
      this.businessTotal.barData.data[1].values = []
      this.businessTotal.lineData.data = []
      this.businessTotal.pieData.data = []
      this.businessTotal.pieData.total = '0'
      this.$http.post('api/accounts/revenue', params).then(res => {
        let lineData = res.lineList
        let barData = res.wholeProvinces
        let total = res.revenue[0]
        this.businessTotal.income = total.ZCOUNT1
        this.businessTotal.increase = total.ZCOUNT2
        this.businessTotal.increaseRange = total.ZCOUNT3
        this.businessTotal.increase1 = total.ZCOUNT11
        this.businessTotal.increaseRange1 = total.ZCOUNT12
        barData.forEach(item => {
          this.businessTotal.barData.dataX.push(item.COL1)
          this.businessTotal.barData.data[0].values.push(item.COL2)
          this.businessTotal.barData.data[1].values.push(item.COL3)
        })
        lineData.forEach(item => {
          this.businessTotal.lineData.data.push({
            date: item.date,
            value: item.zcol1
          })
        })
        this.businessTotal.pieData.total = total.ZCOUNT1
        this.businessTotal.pieData.data.push(
          {name: '一体', value: total.ZCOUNT8, percentage: total.ZCOUNT5},
          {name: '跨行业', value: total.ZCOUNT9, percentage: total.ZCOUNT6},
          {name: '能源', value: total.ZCOUNT10, percentage: total.ZCOUNT7},
        )
        this.businessTotal.loading = false
      })
    },
    //获得一体业务收入情况
    getOperater() {
      let params = {
        areaId: this.userInfo.home_city,
        statMonth: this.timeList.selectDate,
        type: this.operaterData.menuSelected
      }
      this.operaterData.loading = true
      this.operaterData.income = ''
      this.operaterData.increase = ''
      this.operaterData.increaseRange = ''
      this.operaterData.increase1 = ''
      this.operaterData.increaseRange1 = ''
      this.operaterData.percentage5G = ''
      this.operaterData.percentage5GChange = ''
      this.operaterData.totalMonth.dataX = []
      this.operaterData.totalMonth.data[0].values = []
      this.operaterData.totalMonth.data[1].values = []
      this.operaterData.lineData.data = []
      this.operaterData.pieData.data = []
      this.operaterData.pieData.total = '0'
      this.operaterData.totalMonthA.dataX = []
      this.operaterData.totalMonthA.data[0].values = []
      this.operaterData.totalMonthA.data[1].values = []
      this.operaterData.lineDataA.dataX = []
      this.operaterData.lineDataA.data[0].values = []
      this.operaterData.lineDataA.data[1].values = []
      this.$http.post('api/accounts/operater', params).then(res => {
        let line = res.lineList
        let barData = res.operaterMonth
        let sum = res.operater[0]
        this.operaterData.income = sum.YCOUNT1
        this.operaterData.increase = sum.YCOUNT2
        this.operaterData.increaseRange = sum.YCOUNT3
        this.operaterData.increase1 = sum.YCOUNT14
        this.operaterData.increaseRange1 = sum.YCOUNT15
        if (this.operaterData.menuSelected == '1') {
          barData.forEach(item => {
            this.operaterData.totalMonth.dataX.push(item.COL1)
            this.operaterData.totalMonth.data[0].values.push(item.COL2)
            this.operaterData.totalMonth.data[1].values.push(item.COL3)
          })
          line.forEach(item => {
            this.operaterData.lineData.data.push({
              date: item.date,
              value: item.zcol1
            })
          })
          this.operaterData.pieData.total = sum.YCOUNT1
          this.operaterData.pieData.data.push(
            {name: '塔类', value: sum.YCOUNT8, percentage: sum.YCOUNT4, color: '#FC5D5E'},
            {name: '室分', value: sum.YCOUNT9, percentage: sum.YCOUNT5, color: '#FEB80E'},
            {name: '微站', value: sum.YCOUNT10, percentage: sum.YCOUNT6, color: '#56A8EE'},
            {name: '传输', value: sum.YCOUNT11, percentage: sum.YCOUNT7, color: '#259B24'},
            {name: '主营拓展', value: sum.YCOUNT13, percentage: sum.YCOUNT12, color: '#c280ff'}
          )
        } else if (this.operaterData.menuSelected == '2') {
          let xx = 0
          barData.forEach(item => {
            this.operaterData.totalMonthA.dataX.push(item.COL1)
            this.operaterData.totalMonthA.data[0].values.push(item.COL2)
            this.operaterData.totalMonthA.data[1].values.push(item.COL3)
            xx = xx + parseFloat(item.COL3)
          })
          line.forEach(item => {
            this.operaterData.lineDataA.dataX.push(item.date)
            this.operaterData.lineDataA.data[0].values.push(item.zcol1)
            this.operaterData.lineDataA.data[1].values.push(item.zcol2)
          })
          this.operaterData.pieData.total = sum.YCOUNT14
          let average = (xx / barData.length).toFixed(2)
          this.operaterData.totalMonthA.data[1].markLine.value = average
          this.operaterData.percentage5G = sum.YCOUNT8
          this.operaterData.percentage5GChange = sum.YCOUNT9
          this.operaterData.pieData.data.push(
            {name: '塔类', value: sum.YCOUNT10, percentage: sum.YCOUNT4, color: '#FC5D5E'},
            {name: '室分', value: sum.YCOUNT11, percentage: sum.YCOUNT5, color: '#FEB80E'},
            {name: '微站', value: sum.YCOUNT12, percentage: sum.YCOUNT6, color: '#56A8EE'},
            {name: '传输', value: sum.YCOUNT13, percentage: sum.YCOUNT7, color: '#259B24'},
            {name: '主营拓展', value: sum.YCOUNT16, percentage: sum.YCOUNT15, color: '#c280ff'}
          )
        }
        this.operaterData.loading = false
      })
    },
    //获得一体业务出账收入（剔除追溯）情况
    getEliminate() {
      let params = {
        areaId: this.userInfo.home_city,
        statMonth: this.timeList.selectDate,
      }
      this.eliminateDate.loading = true
      this.eliminateDate.income = ''
      this.eliminateDate.increase = ''
      this.eliminateDate.increaseRange = ''
      this.eliminateDate.increase1 = ''
      this.eliminateDate.increaseRange1 = ''
      this.eliminateDate.barData.dataX = []
      this.eliminateDate.barData.data[0].values = []
      this.eliminateDate.barData.data[1].values = []
      this.eliminateDate.lineData.data = []
      this.$http.post('api/accounts/eliminate', params).then(res => {
        let lineData = res.lineList
        let barData = res.columnarList
        let total = res.eliminate[0]
        this.eliminateDate.income = total.ZCOUNT1
        this.eliminateDate.increase = total.ZCOUNT2
        this.eliminateDate.increaseRange = total.ZCOUNT3
        this.eliminateDate.increase1 = total.ZCOUNT4
        this.eliminateDate.increaseRange1 = total.ZCOUNT5
        barData.forEach(item => {
          this.eliminateDate.barData.dataX.push(item.COL1)
          this.eliminateDate.barData.data[0].values.push(item.COL2)
          this.eliminateDate.barData.data[1].values.push(item.COL3)
        })
        lineData.forEach(item => {
          this.eliminateDate.lineData.data.push({
            date: item.date,
            value: item.zcol1
          })
        })
        this.eliminateDate.loading = false
      })
    },
    //获得一体业务追溯情况
    getBusiness() {
      let params = {
        areaId: this.userInfo.home_city,
        statMonth: this.timeList.selectDate,
      }
      this.businessData.loading = true
      this.businessData.totalMonth.data = []
      this.businessData.lineData.data = []
      this.businessData.total = ''
      this.businessData.increase = ''
      this.businessData.decrease = ''
      this.businessData.none = ''
      this.businessData.noneList = ''
      this.$http.post('api/accounts/business', params).then(res => {
        let line = res.lineList
        let barMonth = res.reconcNets
        let sum = res.trace
        this.businessData.total = sum.trace
        this.businessData.increase = sum.traceAdd
        this.businessData.decrease = sum.traceReduce
        this.businessData.none = sum.traceNo
        this.businessData.noneList = sum.tracePro.map(item => {
          return item.COL1
        }).join('、')
        barMonth.forEach(item => {
          this.businessData.totalMonth.data.push({
            date: item.col1,
            value2: item.col2
          })
        })
        line.forEach(item => {
          this.businessData.lineData.data.push({
            date: item.date,
            value: item.zcol1
          })
        })
        this.businessData.loading = false
      })
    },
    //获得一体业务调账情况
    getReconciliation() {
      let params = {
        areaId: this.userInfo.home_city,
        statMonth: this.timeList.selectDate
      }
      this.reconciliationData.loading = true
      this.reconciliationData.totalMonth.data = []
      this.reconciliationData.lineData.data = []
      this.reconciliationData.total = ''
      this.reconciliationData.increase = ''
      this.reconciliationData.decrease = ''
      this.reconciliationData.none = ''
      this.reconciliationData.noneList = ''
      this.$http.post('api/accounts/reconciliation', params).then(res => {
        let totalMonth = res.reconcNets
        let line = res.lineList
        let sum = res.reconciliation
        this.reconciliationData.total = sum.reconcNet
        this.reconciliationData.increase = sum.positive
        this.reconciliationData.decrease = sum.negative
        this.reconciliationData.none = sum.zero
        this.reconciliationData.noneList = sum.Pro.map(item => {
          return item.COL1
        }).join('、')
        totalMonth.forEach(item => {
          this.reconciliationData.totalMonth.data.push({
            date: item.col1,
            value2: item.col2,
          })
        })
        line.forEach(item => {
          this.reconciliationData.lineData.data.push({
            date: item.date,
            value: item.zcol1,
          })
        })
        this.reconciliationData.loading = false
      })
    },
    //跨行业业务收入情况
    getIncome() {
      let params = {
        areaId: this.userInfo.home_city,
        statMonth: this.timeList.selectDate,
      }
      this.incomeData.loading = true
      this.incomeData.totalMonth.dataX = []
      this.incomeData.totalMonth.data[0].values = []
      this.incomeData.totalMonth.data[1].values = []
      this.incomeData.lineData.data = []
      this.incomeData.income = ''
      this.incomeData.increase = ''
      this.incomeData.increaseRange = ''
      this.incomeData.increase1 = ''
      this.incomeData.increaseRange1 = ''
      this.incomeData.totalYear.dataX = []
      this.incomeData.totalYear.data[0].values = []
      this.incomeData.totalYear.data[1].values = []
      this.incomeData.totalYear.data[2].values = []
      this.incomeData.totalYear.data[3].values = []
      this.$http.post('api/accounts/income', params).then(res => {
        let line = res.lineList
        let barMonth = res.incomePillars
        let barYear = res.quarterList
        let sum = res.income[0]
        this.incomeData.income = sum.ZCOUNT1
        this.incomeData.increase = sum.ZCOUNT2
        this.incomeData.increaseRange = sum.ZCOUNT3
        this.incomeData.increase1 = sum.ZCOUNT4
        this.incomeData.increaseRange1 = sum.ZCOUNT5
        barMonth.forEach(item => {
          this.incomeData.totalMonth.dataX.push(item.COL1)
          this.incomeData.totalMonth.data[0].values.push(item.COL2)
          this.incomeData.totalMonth.data[1].values.push(item.COL3)
        })
        line.forEach(item => {
          this.incomeData.lineData.data.push({
            date: item.date,
            value: item.zcol1
          })
        })
        barYear.forEach(item => {
          this.incomeData.totalYear.dataX.push(item.col4)
          if (item.col1 != undefined) {
            this.incomeData.totalYear.data[0].values.push(item.col1)
          } else {
            this.incomeData.totalYear.data[0].values.push('-')
          }
          if (item.col2 != undefined) {
            this.incomeData.totalYear.data[1].values.push(item.col2)
          } else {
            this.incomeData.totalYear.data[1].values.push('-')
          }
          if (item.col3 != undefined) {
            this.incomeData.totalYear.data[2].values.push(item.col3)
          } else {
            this.incomeData.totalYear.data[2].values.push('-')
          }
          let average = (((parseFloat(item.col1) || 0) + (parseFloat(item.col2) || 0) + (parseFloat(item.col3) || 0)) / (Object.keys(item).length -1)).toFixed(2)
          this.incomeData.totalYear.data[3].values.push(average)
        })
        this.incomeData.loading = false
      })
    },
    //获得能源业务出账情况
    getEnergy() {
      let params = {
        areaId: this.userInfo.home_city,
        statMonth: this.timeList.selectDate,
      }
      this.energyData.loading = true
      this.energyData.income = ''
      this.energyData.increase = ''
      this.energyData.increaseRange = ''
      this.energyData.increase1 = ''
      this.energyData.increaseRange1 = ''
      this.energyData.totalMonth.dataX = []
      this.energyData.totalMonth.data[0].values = []
      this.energyData.totalMonth.data[1].values = []
      this.energyData.lineData.data = []
      this.energyData.pieData.total = '0'
      this.energyData.pieData.data = []
      this.$http.post('api/accounts/energy', params).then(res => {
        let line = res.lineList
        let barMonth = res.energyMonth
        let sum = res.energyFirst[0]
        this.energyData.income = sum.NCOUNT1
        this.energyData.increase = sum.NCOUNT2
        this.energyData.increaseRange = sum.NCOUNT3
        this.energyData.pieData.total = sum.NCOUNT14
        this.energyData.increase1 = sum.NCOUNT15
        this.energyData.increaseRange1 = sum.NCOUNT16
        barMonth.forEach(item => {
          this.energyData.totalMonth.dataX.push(item.COL1)
          this.energyData.totalMonth.data[0].values.push(item.COL2)
          this.energyData.totalMonth.data[1].values.push(item.COL3)
        })
        line.forEach(item => {
          this.energyData.lineData.data.push({
            date: item.date,
            value: item.zcol1
          })
        })
        this.energyData.pieData.data.push(
          {name: '充电', value: sum.NCOUNT4, percentage: sum.NCOUNT9, color: '#FC5D5E'},
          {name: '换电', value: sum.NCOUNT5, percentage: sum.NCOUNT10, color: '#FEB80E'},
          {name: '发电', value: sum.NCOUNT6, percentage: sum.NCOUNT11, color: '#56A8EE'},
          {name: '备电', value: sum.NCOUNT7, percentage: sum.NCOUNT12, color: '#259B24'},
          {name: '其他', value: sum.NCOUNT8, percentage: sum.NCOUNT13, color: '#c280ff'},
        )
        this.energyData.loading = false
      })
    },
    //获得同比上年收入增长情况
    getPrevious() {
      let params = {
        areaId: this.userInfo.home_city,
        statMonth: this.timeList.selectDate,
      }
      this.previousData.income = ''
      this.previousData.increase = ''
      this.previousData.increaseRange = ''
      this.previousData.tableData = []
      this.$http.post('api/accounts/previous', params).then(res => {
        let sum = res.previousFirst[0]
        let table = res.previousAccounts[0]
        this.previousData.income = sum.NCOUNT1
        this.previousData.increase = sum.NCOUNT2
        this.previousData.increaseRange = sum.NCOUNT3
        this.previousData.tableData.push(
          {name: '合计', value1: table.GCOUNT2, value2: table.GCOUNT1, value3: table.GCOUNT3, value4: table.GCOUNT4,},
          {name: '一体业务', value1: table.YCOUNT2, value2: table.YCOUNT1, value3: table.YCOUNT3, value4: table.YCOUNT4,},
          {name: '跨行业业务', value1: table.HCOUNT2, value2: table.HCOUNT1, value3: table.HCOUNT3, value4: table.HCOUNT4,},
          {name: '能源业务', value1: table.NCOUNT2, value2: table.NCOUNT1, value3: table.NCOUNT3, value4: table.NCOUNT4,},
        )
      })
    },
    //本年累计收入同比增量贡献率情况
    getSettlement() {
      let params = {
        areaId: this.userInfo.home_city,
        statMonth: this.timeList.selectDate,
      }
      this.settlementData.loading = true
      this.settlementData.percentage1 = ''
      this.settlementData.percentage2 = ''
      this.settlementData.percentage3 = ''
      this.settlementData.pieData.data = []
      this.settlementData.lineIndustry.dataX = []
      this.settlementData.lineIndustry.data[0].values = []
      this.settlementData.lineEnergy.dataX = []
      this.settlementData.lineEnergy.data[0].values = []
      this.$http.post('api/accounts/settlement', params).then(res => {
        let sum = res.settlementFirst[0]
        let industry = res.settlementIndustry
        let energy = res.settlementEnergy
        this.settlementData.percentage1 = sum.ZCOUNT1
        this.settlementData.percentage2 = sum.ZCOUNT2
        this.settlementData.percentage3 = sum.ZCOUNT3
        this.settlementData.pieData.data.push(
          {name: '一体', value: sum.ZCOUNT1, color: '#FC5D5E'},
          {name: '跨行业', value: sum.ZCOUNT2, color: '#FEB80E'},
          {name: '能源', value: sum.ZCOUNT3, color: '#56A8EE'},
        )
        industry.forEach(item => {
          this.settlementData.lineIndustry.dataX.push(item.COL1)
          this.settlementData.lineIndustry.data[0].values.push(item.COL2)
        })
        energy.forEach(item => {
          this.settlementData.lineEnergy.dataX.push(item.COL1)
          this.settlementData.lineEnergy.data[0].values.push(item.COL2)
        })
        this.settlementData.loading = false
      })
    },
    //本年累计出账收入同比拉动增长率情况
    getDirector() {
      let params = {
        areaId: this.userInfo.home_city,
        statMonth: this.timeList.selectDate,
      }
      this.directorData.loading = true
      this.directorData.percentage1 = ''
      this.directorData.percentage2 = ''
      this.directorData.percentage3 = ''
      this.directorData.pieData.data = []
      this.directorData.lineIndustry.dataX = []
      this.directorData.lineIndustry.data[0].values = []
      this.directorData.lineEnergy.dataX = []
      this.directorData.lineEnergy.data[0].values = []
      this.$http.post('api/accounts/director', params).then(res => {
        let sum = res.directorFirst[0]
        let industry = res.directorMonth
        let energy = res.directorChange
        this.directorData.percentage1 = sum.ZCOUNT1
        this.directorData.percentage2 = sum.ZCOUNT2
        this.directorData.percentage3 = sum.ZCOUNT3
        this.directorData.pieData.data.push(
          {name: '一体', value: sum.ZCOUNT1, color: '#FC5D5E'},
          {name: '跨行业', value: sum.ZCOUNT2, color: '#FEB80E'},
          {name: '能源', value: sum.ZCOUNT3, color: '#56A8EE'},
        )
        industry.forEach(item => {
          this.directorData.lineIndustry.dataX.push(item.COL1)
          this.directorData.lineIndustry.data[0].values.push(item.COL2)
        })
        energy.forEach(item => {
          this.directorData.lineEnergy.dataX.push(item.COL1)
          this.directorData.lineEnergy.data[0].values.push(item.COL2)
        })
        this.directorData.loading = false
      })
    },
    //收入调账金额绝对值
    getAccountAbs() {
      let params = {
        areaId: this.userInfo.home_city,
        statMonth: this.timeList.selectDate,
      }
      this.accountAbsDate.loading = true
      this.accountAbsDate.income = ''
      this.accountAbsDate.increase = ''
      this.accountAbsDate.increaseRange = ''
      this.accountAbsDate.barData.dataX = []
      this.accountAbsDate.barData.data[0].values = []
      this.accountAbsDate.barData.data[1].values = []
      this.accountAbsDate.lineData.data = []
      this.$http.post('api/accounts/absoluteValue', params).then(res => {
        let sum = res.absoluteValue[0]
        let barData = res.absoluteValue2
        let lineData = res.lineList
        this.accountAbsDate.income = sum.ZCOUNT1
        this.accountAbsDate.increase = sum.ZCOUNT2
        this.accountAbsDate.increaseRange = sum.ZCOUNT3
        barData.forEach(item => {
          this.accountAbsDate.barData.dataX.push(item.COL1)
          this.accountAbsDate.barData.data[0].values.push(item.COL2)
          this.accountAbsDate.barData.data[1].values.push(item.COL3)
        })
        lineData.forEach(item => {
          this.accountAbsDate.lineData.data.push({
            date: item.date,
            value: item.zcol1
          })
        })
        this.accountAbsDate.loading = false
      })
    },
    //数字初始化
    numFormat(num) {
      return (num+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,')
    },
    //页面初始化
    pageInit() {
      this.getRevenue()
      this.getOperater()
      this.getEliminate()
      this.getBusiness()
      this.getReconciliation()
      this.getIncome()
      this.getEnergy()
      this.getPrevious()
      this.getSettlement()
      this.getDirector()
      this.getAccountAbs()
    },
    //tab切换重绘echarts图
    handleTabClick(name, title) {
      if (name == 'businessTotalA') {
        let data = JSON.parse(JSON.stringify(this.businessTotal.barData.dataX))
        this.businessTotal.barData.dataX = []
        this.businessTotal.barData.dataX = JSON.parse(JSON.stringify(data))
      } else if (name == 'businessTotalB') {
        let data = JSON.parse(JSON.stringify(this.businessTotal.lineData.data))
        this.businessTotal.lineData.data = []
        this.businessTotal.lineData.data = JSON.parse(JSON.stringify(data))
      } else if(name == 'operateA') {
        if (this.operaterData.menuSelected == '1') {
          let data = JSON.parse(JSON.stringify(this.operaterData.totalMonth.dataX))
          this.operaterData.totalMonth.dataX = []
          this.operaterData.totalMonth.dataX = JSON.parse(JSON.stringify(data))
        } else if (this.operaterData.menuSelected == '2') {
          let data1 = JSON.parse(JSON.stringify(this.operaterData.totalMonthA.dataX))
          this.operaterData.totalMonthA.dataX = []
          this.operaterData.totalMonthA.dataX = JSON.parse(JSON.stringify(data1))
        }
      } else if (name == 'operateB') {
        if (this.operaterData.menuSelected == '1') {
          let data = JSON.parse(JSON.stringify(this.operaterData.lineData.data))
          this.operaterData.lineData.data = []
          this.operaterData.lineData.data = JSON.parse(JSON.stringify(data))
        } else if (this.operaterData.menuSelected == '2') {
          let data1 = JSON.parse(JSON.stringify(this.operaterData.lineDataA.dataX))
          this.operaterData.lineDataA.dataX = []
          this.operaterData.lineDataA.dataX = JSON.parse(JSON.stringify(data1))
        }
      } else if (name == 'eliminateA') {
        let data = JSON.parse(JSON.stringify(this.eliminateDate.barData.data))
        this.eliminateDate.barData.data = []
        this.eliminateDate.barData.data = JSON.parse(JSON.stringify(data))
      } else if (name == 'eliminateB') {
        let data = JSON.parse(JSON.stringify(this.eliminateDate.lineData.data))
        this.eliminateDate.lineData.data = []
        this.eliminateDate.lineData.data = JSON.parse(JSON.stringify(data))
      } else if (name == 'businessA') {
        let data = JSON.parse(JSON.stringify(this.businessData.totalMonth.data))
        this.businessData.totalMonth.data = []
        this.businessData.totalMonth.data = JSON.parse(JSON.stringify(data))
      } else if (name == 'businessB') {
        let data = JSON.parse(JSON.stringify(this.businessData.lineData.data))
        this.businessData.lineData.data = []
        this.businessData.lineData.data = JSON.parse(JSON.stringify(data))
      } else if (name == 'reconciliationA') {
        let data = JSON.parse(JSON.stringify(this.reconciliationData.totalMonth.data))
        this.reconciliationData.totalMonth.data = []
        this.reconciliationData.totalMonth.data = JSON.parse(JSON.stringify(data))
      } else if (name == 'reconciliationB') {
        let data = JSON.parse(JSON.stringify(this.reconciliationData.lineData.data))
        this.reconciliationData.lineData.data = []
        this.reconciliationData.lineData.data = JSON.parse(JSON.stringify(data))
      } else if (name == 'incomeA') {
        let data = JSON.parse(JSON.stringify(this.incomeData.totalMonth.dataX))
        this.incomeData.totalMonth.dataX = []
        this.incomeData.totalMonth.dataX = JSON.parse(JSON.stringify(data))
      } else if (name == 'incomeB') {
        let data = JSON.parse(JSON.stringify(this.incomeData.lineData.data))
        this.incomeData.lineData.data = []
        this.incomeData.lineData.data = JSON.parse(JSON.stringify(data))
      } else if (name == 'incomeC') {
        let data = JSON.parse(JSON.stringify(this.incomeData.totalYear.dataX))
        this.incomeData.totalYear.dataX = []
        this.incomeData.totalYear.dataX = JSON.parse(JSON.stringify(data))
      } else if (name == 'energyA') {
        let data = JSON.parse(JSON.stringify(this.energyData.totalMonth.dataX))
        this.energyData.totalMonth.dataX = []
        this.energyData.totalMonth.dataX = JSON.parse(JSON.stringify(data))
      } else if (name == 'energyB') {
        let data = JSON.parse(JSON.stringify(this.energyData.lineData.data))
        this.energyData.lineData.data = []
        this.energyData.lineData.data = JSON.parse(JSON.stringify(data))
      } else if (name == 'accountAbsA') {
        let data = JSON.parse(JSON.stringify(this.accountAbsDate.barData.dataX))
        this.accountAbsDate.barData.dataX = []
        this.accountAbsDate.barData.dataX = JSON.parse(JSON.stringify(data))
      } else if (name == 'accountAbsB') {
        let data = JSON.parse(JSON.stringify(this.accountAbsDate.lineData.data))
        this.accountAbsDate.lineData.data = []
        this.accountAbsDate.lineData.data = JSON.parse(JSON.stringify(data))
      }
    },
    //记录日志
    recordLogs() {
      let params = {
        userId: this.userInfo.user_id,
        verify_code: this.userInfo.verify_code,
        priv_id: '10101244',
      }

      this.$http.post("api/new/insertLogs", params).then(res => {})
    },
    openTipDialog(type) {
      this.tipDialog.show = true
      this.tipDialog.type = type
    },
    tipDialogClose() {
      this.tipDialog.show = false
    }
  },
  mounted() {
    this.$refs.main.addEventListener('scroll', this.handleScroll)
    this.recordLogs()
    this.getDate().then(res => {
      if (res == 'ok') {
        this.pageInit()
      }
    })
  },
}
</script>

<style lang="scss" scoped>
.explain-top{
  font-size: 12px;
  padding: 5px 10px;
  color: #999;
  background-color: #fff;
}
.top-menu {
  overflow: hidden;
  background: #F4F4F4;
  padding: 5px 10px;

  &__menu {
    float: left;
    background: #FF4B47;
    line-height: 26px;
    padding: 0 26px 0 10px;
    color: #fff;
    border-radius: 4px;
    position: relative;

    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 10px;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }

    &::before {
      height: 8px;
      border-top: 1px solid;
      border-bottom: 1px solid;
    }

    &::after {
      height: 1px;
      background: #fff;
    }
  }

  &__picker {
    float: right;
    line-height: 26px;
    padding: 0 26px 0 10px;
    position: relative;

    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 6px;
      height: 6px;
      border-right: 1px solid #666;
      border-bottom: 1px solid #666;
      right: 10px;
    }

    &::before {
      transform: translateY(4px) rotate(45deg);
    }

    &::after {
      transform: translateY(10px) rotate(45deg);
    }
  }
}

.account-title {
  font-size: 16px;
  margin-bottom: 10px;

  &__num {
    font-size: 24px;
    color: #FE786D;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      width: 30px;
      height: 5px;
      background: #FEC7C6;
      left: 50%;
      margin-left: -15px;
      bottom: 5px;
    }

    span {
      position: relative;
    }
  }

  &-sub {
    font-size: 16px;
  }

  &__btn {
    width: 20px;
    height: 20px;
    background: url(~@/assets/images/icon-help.png) no-repeat center;
    background-size: 80% 80%;
    border: 0;
    outline: none;
    padding: 0;
    vertical-align: text-bottom;
  }
}

.menu-list {
  overflow: hidden;
  margin-bottom: 10px;

  &__item {
    float: left;
    min-width: 60px;
    text-align: center;
    padding: 0 10px;
    line-height: 25px;
    color: #666;
    border: 1px solid #ccc;
    border-radius: 13px;
    font-size: 12px;

    & + & {
      margin-left: 10px;
    }

    &--current {
      color: #FE4543;
      border-color: #FE4543;
      background: #FFF6F5;
    }
  }
}

.summary {
  background: #FFF5F5;
  border: 1px dashed #FFCCCC;
  padding: 8px 15px;
  border-radius: 8px;
  margin-bottom: 10px;

  &__num {
    font-weight: bold;
  }
}

.go-top {
  position: fixed;
  bottom: 60px;
  right: 15px;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  background: #FF4B47;

  &::before {
    content: "";
    display: block;
    width: 35px;
    height: 35px;
    background: url(~@/assets/images/icon-up.png) no-repeat center center;
    background-size: 70% 70%;
  }
}

.bar-line-legend {
  text-align: center;

  &__item {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: 20px;

    & + & {
      margin-left: 20px;
    }

    &::before {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    &:nth-child(1)::before {
      background: #FC5D5E;
    }

    &:nth-child(2)::before {
      background: #6AB3F1;
    }

    &:last-child::before {
      height: 1px;
      width: 15px;
      background: #FCC642;
    }
  }
}

.account-main {
  position: relative;
}

.table-wrap {
  box-shadow: 0 0 6px 3px rgba(226,226,226,0.45);
  border-radius: 2px;
  overflow: hidden;
  min-height: 150px;

  th {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.introduce {
  color: #999;
  font-size: 12px;
}

.pie-total {
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  text-align: center;

  &__num {
    font-size: 18px;
  }
}

.pie-legend {
  position: absolute;
  left: 50%;
  top: 20px;
  bottom: 0;
  right: 0;
  background: #fff;

  &__main {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
  }

  &__item {
    position: relative;
    padding-left: 20px;
    font-size: 12px;

    & + & {
      margin-top: 15px;
    }
  }

  &__icon {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    left: 0;
    top: 4px;
  }

  &__value {
    position: absolute;
    left: 50%;
    top: 0;
    color: #666;
  }
}

.chart-wrap {
  height: 200px;
  position: relative;

  &__loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 80px;
    background: #fff;
  }
}

.income-legend {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 12px;
  color: #666;
  overflow: hidden;

  &__item {
    float: left;
    width: 25%;
    text-align: center;

    &:last-child {
      .income-legend__icon {
        height: 2px;
        border-radius: 0;
      }
    }
  }

  &__icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
  }
}

.chart-unit {
  text-align: right;
  color: #929292;
  font-size: 12px;
}
.page-menus {
  &__next {
    font-size: 16px;
    margin-bottom: 20px;
  }

  &__item {
    padding: 0 10px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
